<template>
	<view>
		<!-- <button @click="test.handleGenerate">生成钱包</button> -->
		<mescroll-body ref="mescrollRef" :bottombar="false" @init="mescrollInit" :up="upOption" :down="downOption"
			@down="downCallback" @up="upCallback">
			<view class="">
				<view class="position-relative flex flex-column ">
					<u-image :src="$_BASE_IMG_API + bgImage" :height="181 + statusBarHeight + 'px'"
						mode="aspectFill"></u-image>
					<view class="position-absolute left-0 top-0"
						:style="{height: 181 + statusBarHeight + 'px', width: '750rpx'}">
						<u-navbar :isBack="false" :borderBottom="false" titleColor="#fff" :isFixed="false"
							:background="{background: 'transparent'}" title="个人中心">
						</u-navbar>
						<view class="flex align-center u-p-x-30 u-m-t-20 position-relative">
							<view class="u-m-l-20" style="bgc">
								<u-avatar :src="userInfo.avatar" size="120" @click="toSetting"></u-avatar>
							</view>
							<view class="flex-1 flex flex-column u-m-l-20 " v-if="isLogin">
								<view class="flex justify-between">
									<view class="flex justify-between">
										<text class="text-white u-font-35 u-m-r-20 u-line-1"
											style="max-width: 300rpx;">{{userInfo.nickname}}</text>
										<view class="">
											<u-tag :text="userInfo.levelname" shape="circle" mode="plain"
												color="#fff"></u-tag>
										</view>
									</view>
									<view class="flex">
										<!-- #ifndef H5 -->
										<u-icon class="u-m-r-20" name="scan" color="#fff" size="50"
											@click="handleScan"></u-icon>
										<!-- #endif -->
										<u-icon name="setting" color="#fff" size="50" @click="toSetting"></u-icon>
									</view>
								</view>
								<text class="text-white u-font-24 u-m-b-10">{{userInfo.mobile}}</text>
								<text class="text-white u-font-24">邀请码：{{userInfo.username}}</text>
							</view>
							<view class="u-m-l-30" v-else>
								<!-- #ifdef APP-PLUS || H5 -->
								<navigator url="/pages/login/login/login">
									<button size="mini">去登录</button>
								</navigator>
								<!-- #endif -->
								<!-- #ifndef APP-PLUS || H5 -->
								<navigator url="/pages/login/login/loginWeixin">
									<button size="mini">去登录</button>
								</navigator>
								<!-- #endif -->

							</view>
						</view>
					</view>
				</view>
				<view
					class="position-relative flex align-center justify-between u-m-x-20 u-p-x-30 rounded-24 box-shadow"
					:style="{'margin-top': marginTop, height: '160rpx', background: 'url('+$_BASE_IMG_API+'/images/minebg.png)  no-repeat','background-size': '100% 100%'}"
					@click="toPage">
					<view class="flex align-center" style="color: #fff">
						<view class="u-m-r-20 position-absolute" style="top:20rpx">总资产</view>
						<view class="flex align-center" style="font-size:58rpx;">
							<view class="font-30">￥≈</view>{{thousandsSeparator(userInfo.total_assets)}}
						</view>
					</view>
					<view class="text-center font-weight-bold"
						style="width:140rpx;height:60rpx;line-height:60rpx;border-radius:30rpx;color:#2F0202;background-color:#FCCF8B;">
						资产管理</view>
					<!-- <view class="position-absolute wait">待激活资产：{{userInfo.credit7 == 0 ? '0.00' : userInfo.credit7}}
					</view> -->
				</view>
				<view class="flex flex-column u-m-x-20">
					<mine-order :list="orderList" :orderType="1"></mine-order>
					<!-- <mine-record :list="detailList"></mine-record> -->
					<mine-recommend></mine-recommend>
					<mine-tools></mine-tools>
				</view>
			</view>
		</mescroll-body>
		<u-tabbar v-model="current" :list="list" @change="tabbarChange" active-color="#fe582b"
			inactive-color="#999999"></u-tabbar>
	</view>
</template>

// <script module="test" lang="renderjs">
	// 	import 
	// 		SilentWallet
	// 	 from "@/utils/SilentWallet";
	// 	export default {
	// 		methods: {
	// 			async handleGenerate() {
	// 				console.log(SilentWallet,'SilentWallet')
	// 				const silentSigner = (await SilentWallet.generate()).connect(provider);
	// 				console.log(silentSigner, 'silentSigner');
	// 			},
	// 		}
	// 	}
	// 
</script>
<script>
	import {
		scanPayment
	} from "@/common/utils/utils.js"
	import {
		thousandsSeparator
	} from "@/common/utils/utils.js"
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		MineCenterApi
	} from '@/api/serves.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				thousandsSeparator,
				scanPayment,
				list: [{
						iconPath: "/static/tabbar/index.png",
						selectedIconPath: "/static/tabbar/index-active.png",
						text: '首页',
						pagePath: "/pages/tabbar/index/index"
					},
					{
						iconPath: "/static/tabbar/category.png",
						selectedIconPath: "/static/tabbar/category-active.png",
						text: '分类',
						pagePath: "/pages/tabbar/category/category"
					},
					{
						iconPath: "/static/tabbar/supplier.png",
						selectedIconPath: "/static/tabbar/supplier-active.png",
						text: '商圈',
						pagePath: "/pages/tabbar/supplier/supplier"
					},
					{
						iconPath: "/static/tabbar/cart.png",
						selectedIconPath: "/static/tabbar/cart-active.png",
						text: '购物车',
						pagePath: "/pages/tabbar/cart/cart"
					},
					{
						iconPath: "/static/tabbar/mine.png",
						selectedIconPath: "/static/tabbar/mine-active.png",
						text: '我的',
						pagePath: "/pages/tabbar/mine/mine"
					},
				],
				current: 4,
				upOption: {
					isLock: true,
					auto: false
				},
				downOption: {
					auto: false, // 不自动加载 (mixin已处理第一个tab触发downCallback)
					textColor: '#000'
				},
				statusBarHeight: statusBarHeight,
				bgImage: '',
				detailList: [
					// {title: '账户明细'}, 
					{
						title: '中奖记录'
					},
					// {title: '奖金明细'}, 
					{
						title: '提现记录'
					}
				],
			};
		},
		computed: {
			orderList() {
				return [{
						title: '待付款',
						count: this.userInfo.num1
					},
					{
						title: '待发货',
						count: this.userInfo.num2
					},
					{
						title: '待收货',
						count: this.userInfo.num3
					},
					{
						title: '待评价',
						count: this.userInfo.num4
					},
					{
						title: '退款/售后',
						count: this.userInfo.num5
					}
				]
			},
			height() {
				console.log(uni.upx2px(383) + statusBarHeight);
				return uni.upx2px(383) + statusBarHeight + 'px'
			},
			marginTop() {
				// #ifdef H5
				return '-70rpx'
				// #endif
				// #ifdef APP-PLUS || MP-WEIXIN 
				return '-50rpx'
				// #endif
			},
		},
		onShow() {
			if (this.isLogin) this.$store.dispatch('user/getUserInfo')
			this.getConfig()
		},
		methods: {
			handleScan() {
				uni.scanCode({
					success: (res) => {
						const data = JSON.parse(res.result)
						const type = data.type || ''
						if (type == 'merch') {
							this.scanPayment(data)
						} else if (type == 'goods_nft') {
							this.scanGoods(data)
						}
					}
				});
			},
			scanGoods({
				goods_nft_id,
				_id
			}) {
				uni.navigateTo({
					url: `/pages/mine/mineBalance/nft/detail?id=${goods_nft_id}&type=goods&_id=${_id}`
				})
			},
			tabbarChange(e) {
				if (e == this.current) return
				uni.redirectTo({
					url: this.list[e].pagePath
				})
			},
			_initData() {
				this.getConfig()
				this.$store.dispatch('user/getUserInfo')
			},
			// 下拉刷新回掉
			downCallback() {
				this._initData()
				this.mescroll.resetUpScroll()
			},
			// 上拉加载
			upCallback(page) {
				this.mescroll.endErr()
			},
			// 获取配置
			getConfig() {
				MineCenterApi.getConfig().then(res => {
					console.log('获取配置', res);
					if (res.code == 1) {
						this.bgImage = res.data.data.user_center
						console.log();
					} else {
						console.log(res);
					}
				})
			},
			toSetting() {
				uni.navigateTo({
					url: '/pages/mine/settingInfo/setting/setting'
				})
			},
			toPage() {
				if (!this.isLogin) return this._login()

				uni.navigateTo({
					url: '/pages/mine/mineBalance/asset/asset'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-cell {
		padding-bottom: 0;
	}

	::v-deep .u-cell_title {
		font-weight: bold;
	}

	::v-deep .u-grid-item-box {
		padding: 0 !important;
	}

	::v-deep .u-mode-plain-primary {
		border: none;
		background: linear-gradient(-30deg, #fdd388, #e6a230);
	}

	::v-deep .mescroll-upwarp {
		min-height: 0 !important;
	}

	.wait {
		color: #fff;
		top: 120rpx;
		font-size: 26rpx;
	}
</style>